<template>
  <div>
    <ul class="list-group" style="min-height: 1px">
      <li v-for="(item,index) in listFilter" :class="item.active ? 'active list-group-item':'list-group-item'" :title="item.value" @click="clickItem(item,index)">
        {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Index',
  props: {
    list: {
      type: Array,
      request: true
    },
    props: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      activeIndex: 0,
      view: {
        show: true
      }
    }
  },
  computed: {
    listFilter() {
      const listWrap = []
      for (let i = 0; i < this.list.length; i++) {
        listWrap.push({ value: this.list[i], active: false })
      }

      // 查找 active
      if (listWrap.length > this.activeIndex) {
        listWrap[this.activeIndex].active = true
      }

      return listWrap
    }
  },
  watch: {
    list() {
      this.activeIndex = 0
    }
  },
  created() {
    if (this.props) {
      this.activeIndex = this.props.active || 0
    }
  },
  mounted() {
  },
  methods: {
    clickItem(item, index) {
      this.activeIndex = index
      item.active = true
      this.$emit('click-item', item.value, index)
    }
  }
}
</script>

<style scoped>
  @import "../assets/custom-theme/bootstrap.css";

  .list-group-item{
    overflow-x: hidden;
    text-overflow: ellipsis;
  }

  ul{
    max-height: 55vh;
    overflow-y: scroll;
  }
</style>
